<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useAddJcMallSetting, useGetBrandLabel, useGetEnterpriseLabel, useGetJcMallSettingInfo } from '@fl/api/man-api'
import { SubmitBtn } from '@fl/components'
import FlUpload from '@fl/components/fl-upload.vue'
import { cloneDeep } from 'lodash-es'

const { isPending, mutate } = useAddJcMallSetting()

const visible = defineModel<boolean>('visible', { required: true })

const id = defineModel<null | string>('id')

const type = defineModel<number | undefined>('type')

const { data: labelData, isLoading: labelLoading } = useGetBrandLabel(type)

const { data: enterpriseData, isLoading: enterpriseLoading } = useGetEnterpriseLabel(type)

const { data: infoData, isLoading: infoLoading } = useGetJcMallSettingInfo(id)

const productsOptions = computed(() => {
    const result = cloneDeep(labelData.value || [])
    return result.map((item: any) => {
        return {
            label: item.value,
            value: item.id,
        }
    })
})

const enterpriseOptions = computed(() => {
    const result = cloneDeep(enterpriseData.value || [])
    return result.map((item: any) => {
        return {
            label: item.value,
            value: item.id,
        }
    })
})

const loading = computed(() => labelLoading.value || enterpriseLoading.value || infoLoading.value)

const dialog = computed(() => {
    return id.value ? '编辑配置' : '新建配置'
})

const formRef = ref()

const state = ref<any>(
    {
        img: '',
        name: '',
        products: '',
        relateId: '',
        type: type.value,
    },
)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            disabled: true,
        },
        label: '类型',
        options: [
            {
                label: '主banner',
                value: 1,
            },
            {
                label: '平台介绍',
                value: 2,
            },
            {
                label: '优选品牌',
                value: 3,
            },
            {
                label: '企业供应商LOGO配置',
                value: 4,
            },
        ],
        prop: 'type',
        valueType: 'select',
    },
    {
        colProps: {
            span: 24,
        },
        hideInForm: type.value !== 2,
        label: '平台介绍',
        prop: 'name',

    },
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            filterable: true,
        },
        hideInForm: type.value !== 3,
        label: '关联品牌',
        options: productsOptions,
        prop: 'products',
        valueType: 'select',
    },
    {
        colProps: {
            span: 24,
        },
        fieldProps: {
            filterable: true,
        },
        hideInForm: type.value !== 4,
        label: '关联供应商',
        options: enterpriseOptions,
        prop: 'enterprise',
        valueType: 'select',
    },
    {
        colProps: {
            span: 24,
        },
        label: '图片',
        prop: 'img',
    },

]

const rules = {
    enterprise: [
        {
            message: '请选择供应商',
            required: true,
        },
    ],

    img: [
        {
            message: '请上传图片',
            required: true,
        },
    ],
    name: [
        {
            message: '请输入平台介绍',
            required: true,
        },
    ],
    products: [
        {
            message: '请选择品牌',
            required: true,
        },
    ],

}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = null
    type.value = undefined
    formRef.value.formInstance.resetFields()
}

async function confirm() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const name = type.value === 3
            ? productsOptions.value.filter((item: any) => item.value === state.value.products)?.[0]?.label
            : type.value === 4
                ? enterpriseOptions.value.filter((item: any) => item.value === state.value.enterprise)?.[0]?.label
                : state.value.name

        const relateId = type.value === 3 ? state.value.products : type.value === 4 ? state.value.enterprise : ''
        const params = {
            id: state.value.id || '',
            img: state.value.img,
            name,
            relateId,
            type: String(state.value.type),
            url: state.value.img,
        }
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

watchEffect(() => {
    if (infoData.value) {
        console.log(infoData.value, '===')
        state.value = {
            ...infoData.value,
            enterprise: infoData.value.relateId,
            type: Number(infoData.value.type),
        }
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="800"
                close-on-press-escape
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="loading"
                    :rows="5"
        />

        <PlusForm v-else
                  ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="rules"
                  :has-footer="false"
        >
            <template #plus-field-img>
                <FlUpload :key="state.img"
                          v-model="state.img"
                          is-mall-admin
                          accept=".jpg,.png,.jpeg"
                />
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="confirm"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
